<template>
  <div>
    <userCardAndTable
      :alertFlag="true"
      :alertTitle="'共'+ total +'条记录'"
      :firstFormFlag="true"
      :firstClass="titleClassObj"
      :tableNeedData="tableNeedData"
      :total="total"
      :params="params" />
  </div>
</template>

<script>
import userCardAndTable from '../components/cardComplete.vue'
// 导入获取用户列表接口
import { getUserList } from '@/api/base/users.js'
export default {
  components: {
    // 卡片&&表格区域
    userCardAndTable
  },
  data () {
    return {
      // 导入到卡片组件==> 表格组件
      tableNeedData: {
        // 用户列表
        List: [],
        // 表格列数据
        tableColumnShow: [{// 0
          flag: true,
          columnLabel: '#',
          columnClass: ''
        }, {// 1
          flag: true,
          columnLabel: 'id',
          columnClass: ''
        }, {// 2
          flag: true,
          columnLabel: '邮箱',
          columnClass: ''
        }, {// 3
          flag: true,
          columnLabel: '联系电话',
          columnClass: ''
        }, {// 4
          flag: true,
          columnLabel: '用户名',
          columnClass: ''
        }, {// 5
          flag: true,
          columnLabel: '权限组名称',
          columnClass: ''
        }, {// 6
          flag: true,
          columnLabel: '角色',
          columnClass: ''
        }, {// 7
          flag: true,
          columnLabel: '操作',
          columnClass: ''
        }]
      },
      // 需要传入卡片组件的数据
      titleClassObj: {
        input1: 'userFirstClassInput1',
        button1: 'userFirstClassButton1',
        button2: 'userFirstClassButton2',
        button3: 'userFirstClassButton3',
        button: 'userFirstClassButton',
        input1Placeholder: '输入用户名搜索',
        button1Icon: 'el-icon-refresh',
        button2Icon: 'el-icon-search',
        button3Icon: 'el-icon-edit',
      },
      // 页面定义数据数量
      total: 0,
      // 获取列表传入数据
      params: {
        page: 1,
        pagesize: 10
      }
    }
  },

  created () {
    this.getUserList()
  },

  methods: {
    async getUserList () {
      const { data: res } = await getUserList(this.params)
      this.tableNeedData.List = res.list
      console.log(res)
      this.total = res.counts
    },
    changePageSize (val) {
      this.params.pagesize = val
      this.getUserList()
    },
    changePageNum (val) {
      this.params.page = val
      this.getUserList()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
